<template>
  <el-dialog
    title="编辑用户"
    :visible.sync="visible"
    width="50%"
    :close-on-click-modal="false"
    top="2vh"
    :show-close="false"
    center
  >
    <el-form :model="inputUser" label-width="80px" :inline="true" ref="ruleForm" :rules="rules">
      <el-form-item label="用户名" prop="userLoginName">
        <el-input v-model="inputUser.userLoginName" disabled class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="姓 名" prop="userName">
        <el-input v-model="inputUser.userName" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="旧密码" prop="userPwd">
        <el-input type="password" v-model="inputUser.userPwd" class="password"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="userPassword">
        <el-input type="password" v-model="inputUser.userPassword" class="password"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="userSex">
        <label slot="label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
        <el-radio-group v-model="inputUser.userSex">
          <el-radio style="margin-left:10px" label="男" border>&nbsp;&nbsp; 男 &nbsp;&nbsp;</el-radio>
          <el-radio label="女" border>&nbsp;&nbsp;女 &nbsp;&nbsp;</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="联系电话" prop="userPhone">
        <el-input v-model="inputUser.userPhone" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="userEmail">
        <el-input v-model="inputUser.userEmail" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="userStatus">
        <el-radio-group v-model="inputUser.userStatus">
          <el-radio label="有效" border>有效</el-radio>
          <el-radio label="无效" border>无效</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancle()">取 消</el-button>
      <el-button type="primary" @click="addForm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { Message } from "element-ui";
import aes from "../../../../utils/aes";
export default {
  components: {},
  props: ["msg"],
  data() {
    var validateuserPwd = (rule, value, callback) => {
      const encryptPassword = aes.Encrypt(value);
      if (value === "") {
        callback(new Error("请输入旧密码"));
      } else if (encryptPassword != this.pwd) {
        callback(new Error("你输入的旧密码有误"));
      } else {
        callback();
      }
    };
    var validatePhone = (rule, value, callback) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    var validateMail = (rule, value, callback) => {
      if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(value)) {
        callback(new Error("请输入正确的邮箱"));
      } else {
        callback();
      }
    };
    return {
      inputUser: {
        userId: 0,
        userLoginName: "",
        userName: "",
        userPassword: "",
        userSex: 0,
        userPhone: "",
        userEmail: "",
        userStatus: 0,
        userPwd: "",
      },
      pwd: "",
      visible: true,
      rules: {
        userPwd: [{required: true, validator: validateuserPwd, trigger: "blur" }],
        userPhone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { validator: validatePhone },
        ],
        userEmail: [
          { required: true, message: "请选择邮箱", trigger: "blur" },
          { validator: validateMail },
        ],
      },
    };
  },
  methods: {
    cancle() {
      console.log("hideModel");
      this.$emit("hideModel", false);
      
    },
    addForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = new URLSearchParams();
          param.append("userId", this.inputUser.userId);
          param.append("userName", this.inputUser.userName);
          const encryptPassword = aes.Encrypt(this.inputUser.userPassword);
          param.append("userPassword", encryptPassword);
          param.append("userSex", this.inputUser.userSex == "男" ? 1 : 0);
          param.append("userPhone", this.inputUser.userPhone);
          param.append("userEmail", this.inputUser.userEmail);
          param.append(
            "userStatus",
            this.inputUser.userStatus == "有效" ? 1 : 0
          );
          var that = this;
          that
            .$http({
              method: "post",
              url: "/user/updateUser",
              data: param,
            })
            .then((res) => {
              // that.$emit("updateFlag", false);
              console.log(res);
              if (res.data == 1) {
                Message({ message: "修改成功", type: "success" });
              } else {
                Message({ message: "修改失败", type: "error" });
              }
            });
          this.$emit("hideModel", false);
          this.$emit("refreshList");
        } else {
          Message({ message: "修改失败,格式输入错误", type: "error" });
        }
      });
    },
    edit() {
      // console.log(this.msg.userStatus)
      this.inputUser.userId = this.msg.userId;
      this.inputUser.userLoginName = this.msg.userLoginName;
      this.inputUser.userName = this.msg.userName;
      // this.inputRule.userPassword=this.msg.userPassword;
      this.inputUser.userSex = this.msg.userSex == 1 ? "男" : "女";
      this.inputUser.userPhone = this.msg.userPhone;
      this.inputUser.userEmail = this.msg.userEmail;
      this.inputUser.userStatus = this.msg.userStatus == 1 ? "有效" : "无效";
    },
  },
  mounted() {
    console.log(this.msg);
    this.$http
      .get("/user/getPassword", { params: { userId: this.msg.userId } })
      .then((res) => {
        console.log(res.data.userPassword);
        this.pwd = res.data.userPassword;
      });
    this.edit();
  },
};
</script>
<style lang="less">
.input_width {
  width: 200px;
}
.password {
  width: 10px;
}
.el-input__inner {
  width: 10px;
}
</style>